<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			let colorsName = []
			let colorsValue= []
			function init(){
				let xhr = new XMLHttpRequest()
				xhr.open("GET","color.xml",true)
				xhr.send()
				xhr.onreadystatechange = function(){
					if(xhr.readyState==4 && xhr.status==200){
						let data = xhr.responseXML
						colorsName = data.querySelectorAll("color>name")
						colorsValue = data.querySelectorAll("color>value")
						let s = document.querySelector("select")
						for (var i = 0; i < colorsName.length; i++) {
							s.options[i] = new Option(colorsName[i].innerHTML)
					}
					document.body.setAttribute("style","background-color: "+colorsValue[0].innerHTML+";")
					}
				}
			}
				
			function change(){
				let s = document.querySelector("select")
				let index = s.selectedIndex
				document.body.setAttribute("style","background-color:"+colorsValue[index].innerHTML+";")
			}
		</script>
	</head>
	<body onload="init()">
		请选择网页背景色：<select onchange="change()"></select>
	</body>
</html>
